<template>
  <div class="repair_report_list">
    <Row type="flex" justify="space-between" class="repair_report_listt-edit">
      <Form class="from" style="width: 100%" label-position="left" inline>
        <Row type="flex" justify="space-between">
          <Row>
            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">输入搜索：</div>
              <Input v-model="formData.name" class="input-width" placeholder="标准名称/PN" />
            </FormItem>

            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">一级分类：</div>
              <Select
                style="width:180px"
                @on-change="handleMachineCategory"
                v-model="formData.machineCategoryId"
                :label-in-value="true"
                transfer
                placeholder="请选择"
                class="input-width"
              >
                <Option
                  v-for="item in machineCategoryIdData"
                  :value="item.machineCategoryId"
                  :label="item.name"
                  :key="item.machineCategoryId"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">二级分类：</div>
              <Select
                style="width:180px"
                @on-change="handleSubMachineCategory"
                :label-in-value="true"
                v-model="formData.subMachineCategoryId"
                transfer
                placeholder="请选择"
                class="input-width"
              >
                <Option
                  v-for="item in subMachineCategoryIdData"
                  :value="item.machineCategoryId"
                  :label="item.name"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
            <FormItem>
              <Button class="search-btn" @click="search" type="primary">查询</Button>
            </FormItem>
            <FormItem>
              <Button class="search-btn" @click="handleReset">重置</Button>
            </FormItem>
          </Row>
          <!-- <Row>
            <FormItem>
              <Button @click="handleExport" v-if="hasPermission('moms:assets:machineconfigexport')" type="primary"
                >批量导出</Button
              >
            </FormItem>
          </Row> -->
        <Row type="flex" justify="end">
          <FormItem v-if="hasPermission('moms:assets:machineexport')" >
            <Button @click="$router.push({ name: 'product_control_import' })" style="width: 80px; margin-right: 20px">导入</Button>
            <Button
              style="width: 80px"
              @click="handleExport"
              >导出</Button
            >
          </FormItem>
        </Row>
        </Row>
        <!-- <Row type="flex" justify="end">
          <FormItem>
            <Button @click="$router.push({ name: 'product_control_import' })" style="width: 80px; margin-right: 20px">导入</Button>
            <Button
              style="width: 80px"
              @click="handleExport"
              >导出</Button
            >
          </FormItem>
        </Row> -->
      </Form>
    </Row>
    <Table
      :max-height="resData.length > 10 ? 530 : 0"
      :loading="loading"
      @on-sort-change="handelSortChange"
      stripe
      :columns="columns"
      :data="resData"
      class="table-list"
    ></Table>
    <div class="page-box">
      <Page
        :total="total"
        ref="pages"
        :current.sync="formData.pageIndex"
        :page-size="formData.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
import { machineRecord, categoryList, machineExport } from '@/api/asset/repair/asset-manage'
import dayjs from 'dayjs'
import { blobToXls } from '@/libs/blobToXls'
import errorCaptured from '@/libs/errorCaptured'
export default {
  name: 'asset_manage_product_control',
  components: {},
  data () {
    return {
      formData: {
        name: '',
        machineCategoryId: '',
        subMachineCategoryId: '',
        orderBySlotQuantity: 0, // 投币口数排序 0-正序，1-逆序
        orderBySalesAmount: 0, // 销售数量排序 0-正序，1-逆序
        limit: 10,
        offset: 0,
        pageIndex: 1
      },
      merchantId: this.$store.state.user.merchantId.toLocaleLowerCase(),
      loading: false,
      total: 0,
      resData: [],
      machineList: [], // 分类列表
      machineCategoryIdData: [], // 一级分类列表
      subMachineCategoryIdData: [], // 二级分类
      columns: [
        {
          type: 'index',

          title: '序号',
          align: 'center'
        },
        { title: '标准名称', key: 'name', align: 'center' },
        { title: 'PN', key: 'pnCode', align: 'center' },
        { title: '供应商简称', key: 'abbreName', align: 'center' },
        { title: '一级分类', key: 'machineCategoryName', align: 'center' },
        { title: '二级分类', key: 'subMachineCategoryName', align: 'center' },
        { title: '销售台数', key: 'salesAmount', align: 'center' },
        { title: '游戏位', key: 'slotQuantity', align: 'center' },
        { title: '创建人', key: 'creatorName', align: 'center' },
        { title: '最近编辑时间', key: 'lastModify', align: 'center' },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === 0) return null
            return h('div', [
              this.hasPermission('moms:assets:machinedetail') ? h('i', {
                class: ['iconsys', 'icondetail'],
                attr: { title: '查看详情' },
                on: {
                  click: () => {
                    // console.log(params.row)
                    this.$router.push({ name: 'asset_manage_product_control_detail', params: { id: params.row.machineId } })
                  }
                }
              }) : '',
              this.hasPermission('moms:assets:machineupdate') ? h('i', {
                class: ['iconsys', 'iconedit'],
                attr: { title: '编辑' },
                on: {
                  click: () => {
                    this.$router.push({ name: 'asset_manage_product_control_edit', params: { id: params.row.machineId, t: +new Date() } })
                  }
                }
              }) : ''
            ])
          }
        }
      ]
    }
  },
  created () {
    this.categoryList()
    this.machineRecord()
  },
  activated () {
    this.machineRecord()
  },
  methods: {
    search () {
      // this.formData.limit = 10
      // this.formData.limit = 10
      this.formData.offset = 0
      this.formData.pageIndex = 1
      this.machineRecord()
    },
    async handleShop () {
      this._search()
    },
    // 选择一级分类
    handleMachineCategory (val) {
      // console.log(val)
      this.formData.subMachineCategoryId = ''
      this.subMachineCategoryIdData = this.machineList.filter(item => item.parentId === val.value)
      this.search()
    },
    // 二级分类
    handleSubMachineCategory () {
      this.search()
    },
    // 导出
    async handleExport () {
      // let formData = new FormData()
      // formData.append('fileName', '产品管理列表.xls')
      // Object.keys(this.formData).forEach(key => {
      //   formData.append(key, this.formData[key])
      // })
      const res = await machineExport({ fileName: '产品管理列表.xls', param: { ...this.formData } })
      blobToXls(res.data, `产品管理列表${dayjs().format('YYYY-MM-DD HH:mm:ss')}`)
    },
    handleReset () {
      this.formData = {
        name: '',
        machineCategoryId: '',
        subMachineCategoryId: '',
        orderBySlotQuantity: 0, // 投币口数排序 0-正序，1-逆序
        orderBySalesAmount: 0, // 销售数量排序 0-正序，1-逆序
        limit: 10,
        offset: 0,
        pageIndex: 1
      }
      this.subMachineCategoryIdData = []
      this.machineRecord()
    },
    handlePage (val) {
      this.formData.offset = (val - 1) * this.formData.limit
      this.machineRecord()
    },
    handlePageSize (val) {
      this.formData.limit = val
      this.formData.offset = 0
      if (this.formData.pageIndex === 1) {
        this.machineRecord()
      } else {
        this.formData.pageIndex = 1
      }
      // this.getShopList()
    },
    // 排序
    handelSortChange (params) {
      console.log(params)
      const obj = {
        asc: 0,
        desc: 1
      }

      const key = {
        salesAmount: 'orderBySalesAmount',
        slotQuantity: 'orderBySlotQuantity'
      }
      //  console.log(key[params.key])
      //  console.log(key[params.key])
      this.formData[key[params.key]] = obj[params.order]
      this.search()
    },
    async categoryList () {
      // let formData = new FormData()
      // formData.append('merchantId', this.$store.state.user.merchantId.toLocaleLowerCase())
      const [err, res] = await errorCaptured(categoryList, { merchantId: this.merchantId })
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      this.machineList = res.data.data || []
      this.machineCategoryIdData = (res.data.data || []).filter(item => !item.parentId)
    },
    async machineRecord () {
      this.loading = true
      const [err, res] = await errorCaptured(machineRecord, this.formData)
      this.loading = false
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      this.resData = res.data.data || []
      this.total = res.data.totalCount || 0
    }
  }
}
</script>
<style lang="less" scoped>
.repair_report_list {
  .repair_report_listt-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .search-btn {
    width: 80px;
  }
}
</style>
<style lang="less">
.repair_report_list {
  .select-shop-item {
    height: 35px;
    width: 210px;
    .ivu-select-selection {
      height: 35px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .ivu-tag {
      max-width: 100px;
    }
  }
}
</style>
